<template>
  <scroll-view @scrolltolower="scrolltolower" class="scroll-view" scroll-y>
    <view class="received_item" v-for="(ele, index) in list">
      <view class="received_name" @tap="handleEdit(ele)">{{ ele.taskName }}</view>
      <view class="received_handle">
        <view class="received_time">{{ ele.expireDate }}到期</view>
        <view class="remindDate_time">{{ ele.remindDate }}</view>
        <view class="received_btn" @tap="receiveTask(ele)">接收任务</view>
      </view>
    </view>

    <fl-empty v-if="list.length == 0" />
    <view style="padding: 10rpx 0">
      <view class="none" v-if="isFinish">没有更多了~</view>
      <view class="loadMore" v-if="isMore">正在加载...</view>
    </view>
  </scroll-view>
</template>

<script setup>
import { nextTick, ref } from "vue";
import { onLoad, onShow } from "@dcloudio/uni-app";
import modal from "@/plugins/modal";

import { subTaskList, superviseTask } from "@/api/supervisionMaster/supervisionSubTask";
const query = {
  pageNum: 1,
  pageSize: 10,
  tabType: "0",
};
const isFinish = ref(false);
const isMore = ref(false);
const list = ref([]);
const total = ref(0);
const typeUser = ref("");
function handleNav(url) {
  uni.navigateTo({ url: url });
}
function scrolltolower() {
  if (query.pageNum * query.pageSize >= total.value) {
    isFinish.value = true;
    isMore.value = false;
    return;
  }
  query.pageNum += 1;
  isMore.value = true;
  getList();
}
// 督导人员
async function getList() {
  let res = await subTaskList(query);
  list.value = [...list.value, ...res.rows];

  total.value = res.total;
}
function handleEdit(ele) {
  uni.setStorageSync("courses", ele);
  let url = `?typeUser=${typeUser.value}&status=1`;
  uni.navigateTo({ url: "/pages/supervisionSubTaskLook/index" + url });
}
async function receiveTask(ele) {
  const res = await modal.confirm("确认接收任务吗?");
  if (res) {
    let par = {
      approveStatus: "0",
      id: ele.id,
    };
    await superviseTask(par);
    modal.msgSuccess("操作成功");
    reset();
  }
}
onLoad((options) => {
  typeUser.value = options.type;
  nextTick(() => {
    reset();
  });
});
const reset = () => {
  isFinish.value = false;
  isMore.value = false;
  query.pageNum = 1;
  list.value = [];
  total.value = 0;
  getList();
};
</script>

<style lang="scss" scoped>
page {
  width: 100%;
  height: 100%;
  background-color: #fff;
}
.scroll-view {
  height: 100%;

  .received_item {
    width: 685rpx;
    height: 200rpx;
    background-color: #fff;
    border-radius: 12rpx;
    margin: 0 auto 0rpx;
    padding: 15rpx 25rpx;
    border-bottom: 1rpx solid #eeeeee;
    // &:nth-child(1) {
    //   margin-top: 20rpx;
    // }
    .received_name {
      font-size: 28rpx;
      color: #323233;
      min-height: 80rpx;
      // font-weight: 700;
      margin-bottom: 11rpx;
      overflow: hidden; //超出文本隐藏
      text-overflow: ellipsis; ///超出部分省略号显示
      display: -webkit-box; //弹性盒模型
      -webkit-box-orient: vertical; //上下垂直
      -webkit-line-clamp: 2; //自定义行数
    }
    .received_handle {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 30rpx;
      .received_time {
        font-size: 24rpx;
        width: 200rpx;
        text-align: center;
        background-color: #0cbea8;
        color: #fff;
        border-radius: 8rpx;
      }
      .remindDate_time {
        font-size: 28rpx;
        color: #999999;
      }
      .received_btn {
        width: 220rpx;
        height: 60rpx;
        background-color: #0d80d7;
        color: #fff;
        text-align: center;
        line-height: 60rpx;
        font-size: 28rpx;
        border-radius: 30rpx;
      }
    }
  }
}
</style>
